﻿@page "/docs/components/card"

<DocsPageTitle>
    Cards
</DocsPageTitle>

<DocsPageParagraph>
    The card component comprises several elements that you can mix and match:
</DocsPageParagraph>

<ul>
    <li>
        <Code Tag>Card</Code>
        <ul>
            <li>
                <Code Tag>CardHeader</Code>
            </li>
            <li>
                <Code Tag>CardImage</Code>
            </li>
            <li>
                <Code Tag>CardBody</Code>
                <ul>
                    <li>
                        <Code Tag>CardTitle</Code>
                    </li>
                    <li>
                        <Code Tag>CardSubtitle</Code>
                    </li>
                    <li>
                        <Code Tag>CardText</Code>
                    </li>
                </ul>
            </li>
            <li>
                <Code Tag>CardFooter</Code>
            </li>
        </ul>
    </li>
    <li>
        <Code Tag>CardGroup</Code>
    </li>
    <li>
        <Code Tag>CardDeck</Code>
    </li>
</ul>

<DocsPageSection>
    <DocsPageSectionHeader Title="Card">
        Simple card
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <CardExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="CardExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Card deck">
        A set of equal width and height cards that aren’t attached to one another.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <CardDeckExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="CardDeckExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes Title="Card">
    <DocsAttributesItem Name="Background" Type="Background" Default="None">
        Sets the bar background color.
    </DocsAttributesItem>
    <DocsAttributesItem Name="WhiteText" Type="bool" Default="false">
        Sets the white text when using the darker background.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="CardText">
    <DocsAttributesItem Name="Italic" Type="bool" Default="false">
        Italicize text if set to true.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextAlignment" Type="TextAlignment" Default="None">
        Sets the text alignment.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextColor" Type="TextColor" Default="None">
        Sets the text color.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextOverflow" Type="TextOverflow" Default="None">
        Determines how the text will behave when it is larger than a parent container.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextTransform" Type="TextTransform" Default="None">
        Sets the text transformation.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextWeight" Type="TextWeight" Default="None">
        Sets the text weight.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="CardTitle">
    <DocsAttributesItem Name="Italic" Type="bool" Default="false">
        Italicize text if set to true.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Size" Type="int?" Default="null">
        Number from 1 to 6 that defines the title size where the smaller number means larger text.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextAlignment" Type="TextAlignment" Default="None">
        Sets the text alignment.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextColor" Type="TextColor" Default="None">
        Sets the text color.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextOverflow" Type="TextOverflow" Default="None">
        Determines how the text will behave when it is larger than a parent container.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextTransform" Type="TextTransform" Default="None">
        Sets the text transformation.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextWeight" Type="TextWeight" Default="None">
        Sets the text weight.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="CardSubtitle">
    <DocsAttributesItem Name="Italic" Type="bool" Default="false">
        Italicize text if set to true.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Size" Type="int" Default="6">
        Number from 1 to 6 that defines the subtitle size where the smaller number means larger text.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextAlignment" Type="TextAlignment" Default="None">
        Sets the text alignment.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextColor" Type="TextColor" Default="None">
        Sets the text color.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextOverflow" Type="TextOverflow" Default="None">
        Determines how the text will behave when it is larger than a parent container.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextTransform" Type="TextTransform" Default="None">
        Sets the text transformation.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextWeight" Type="TextWeight" Default="None">
        Sets the text weight.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="CardLink">
    <DocsAttributesItem Name="Alt" Type="string" Default="null">
        Alternative link text.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Source" Type="string" Default="null">
        Link URL.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="CardImage">
    <DocsAttributesItem Name="Alt" Type="string" Default="null">
        Alternative image text.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Source" Type="string" Default="null">
        Image URL.
    </DocsAttributesItem>
</DocsAttributes>